iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

30天CSS、JS、React打造專案零組件系列 第 26

DAY26 - [React] 登入登出 router

  • 分享至 

  • xImage
  •  

今日文章目錄

  • 需求說明
  • 過程紀錄
  • 參考文章

今天來練習Router切換頁面。

需求說明

  • 兩個頁面:登入頁、顯示頁
  • 邏輯規劃:(這次只會做到檢查帳號、密碼有填,就當作成功。)
    邏輯規劃

過程紀錄

  • 顯示頁使用原本的ToDoPage(加入登出鈕),新增登入頁LoginPage(加入登入鈕)。
  • 頁面 router 規劃:我使用 react-router-dom來練習。
  • react-router-dom 四大核心: Router Switch Route Link
  • Router: 規範切換頁面的影響範圍。
  • Link: 指定切換頁面路徑位置的其中一個方法。
  • Switch Route: Switch比對Route路徑,路徑符合Route,執行轉換頁面。

直接來看例子:

  1. 安排路徑path與對應的顯示頁面component
const routes = [
  {
    exact: true,
    path: '/',
    component: <LoginPage />,
  },
  {
    path: '/toDoPage',
    component: <ToDoPage />,
  },
  {
    path: '/loginPage',
    component: <LoginPage />,
  },
];
  1. App.jsx(所有頁面的集散地)加入Router Switch Route
function App() {
  return (
    <Router>
      <Switch>
        {routes.map((item) => (
          <Route
            key={item.path}
            exact={item.exact}
            path={item.path}
          >
            {item.component}
          </Route>
        ))}
      </Switch>
    </Router>
  );
}
export default App;

(補充) exact: 代表 Switch在比對路徑,指定路徑要完全等同path,才滿足條件。
這在針對主頁path: '/'都建議要加,來看看差異:

(一) 沒加exact的話:
如果我頁面要指向path: '/toDoPage',但Switch先爬到第一個且符合要求path="/",頁面就直接指向LoginPage,就不會看到ToDoPage

<Router>
  <Switch>
      <Route path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>

(二) 改善的方法1: 把path="/"條件放在最後一個,這樣Switch就會先找到ToDoPage

<Router>
  <Switch>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
      <Route path="/">
          <LoginPage />
      </Route>
 </Switch>
</Router>

(三) 改善的方法2: 把path="/"加入exactSwitch符合100%符合的路徑,才會轉換。

<Router>
  <Switch>
      <Route exact path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>
  1. 在需要轉換頁面的地方加入Link: 這裡to的路徑要對應到上方的path
<Link to="/loginPage">登入頁面</Link>
  1. 使用Router提供useHistory()方法,指定路徑切換:
export default function LoginPage() {
  const history = useHistory();
  const handleSubmit = () => {
      history.push('/toDoPage');
  };
  
  return(
    <Button 
      type="primary" 
      htmlType="submit" 
      onClick={handleSubmit}
    >
        Submit
    </Button>
  )
}

參考文章


上一篇
DAY25 - [React hook] props
下一篇
DAY27 - [React] useEffect
系列文
30天CSS、JS、React打造專案零組件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言